page {
  background: #eff3eb url(https://www.xadjtfb.com/Assets/images/cBg.jpg) no-repeat;
  background-size: cover;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 5%;

  .title {
    width: 50%;
    font-size: 40rpx;
    font-weight: bold;
    line-height: 90rpx;
  }

  .user {
    display: flex;
    align-items: center;

    .user-avatar {
      overflow: hidden;
      display: block;
      width: 90rpx;
      height: 90rpx;
      margin-right: 10rpx;
      border-radius: 50%;
      border: 1px solid #fff;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    }

    .user-text {
      font-size: 29rpx;
      line-height: 90rpx;
    }
  }

}

.banner {
  padding: 5%;

  image {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 10rpx;
    overflow: hidden;
  }
}

.items {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5%;

  .item {
    width: 29.3333333%;
    height: 170rpx;
    margin: 3% 2%;
    padding: 3% 0;
    box-shadow: 4rpx 4 tpx 20rpx #ccc;
    border-radius: 16rpx;
    text-align: center;
    background: #fff;

    .item-image {
      width: 80%;
      height: 128rpx;
      margin: 0 10%;
      background: #fff;
    }

    .item-text {
      display: block;
      font-size: 28rpx;
      color: #333;
    }
  }
}